<template>
  <div class="content">
    <div class="doctorBasic" v-if="!id">
      <p>{{ list1 }}</p>
    </div>
    <div class="diagnoseInfo" v-else>
      <div class="hua">
        <div
          class="diagnoseCard border-bottom"
          v-for="(item, index) in list2"
          :key="index"
        >
          <div class="diagnoseText">
            <p>
              <i>{{ item.date }}</i
              ><i>{{ item.day }}</i
              ><i>{{ item.time }}</i>
            </p>
            <span>{{ job2 }}</span>
            <b>{{ item.money }}</b>
          </div>
          <button @click="subscribeAction(index)">{{ item.rest }}</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    id: Number,
    job2: String,
  },
  data() {
    return {
      list1:
        "1995年开始工作于北京XX医院，历任住院医，总住院医师，主治医师， 副主任医师，主任医师。2003年开始从事冠心病介入治疗工作，目前已行冠脉造影2000余例，冠脉支架介入手术800余例，起搏器植入30余例。",
      list2: [
        {
          date: "04-26",
          day: "星期一",
          time: "上午",
          money: "$60.00",
          rest: "剩余10",
        },
        {
          date: "04-27",
          day: "星期二",
          time: "上午",
          money: "$60.00",
          rest: "剩余10",
        },
        {
          date: "04-28",
          day: "星期三",
          time: "上午",
          money: "$60.00",
          rest: "剩余10",
        },
        {
          date: "04-29",
          day: "星期四",
          time: "上午",
          money: "$60.00",
          rest: "剩余10",
        },
        {
          date: "04-30",
          day: "星期五",
          time: "上午",
          money: "$60.00",
          rest: "剩余10",
        },
        {
          date: "05-01",
          day: "星期六",
          time: "上午",
          money: "$60.00",
          rest: "剩余10",
        },
        {
          date: "05-02",
          day: "星期日",
          time: "上午",
          money: "$60.00",
          rest: "剩余10",
        },
      ],
    };
  },
  methods: {
    subscribeAction(index) {
      console.log(index);
    },
  },
};
</script>

<style scoped lang="scss">
@function vw($px) {
  @return ($px/375) * 100vw;
}
* {
  margin: 0;
  padding: 0;
}
.hua {
  overflow: auto;
  height: 100%;
}
.content {
  overflow: auto;
  position: absolute;
  top: vw(270);
  z-index: 1;
  width: 100%;
  height: calc(100% - vw(268)); //改动的地方，可以滑动
  .doctorBasic {
    margin-top: vw(20);
    padding: 0 vw(10) 0 vw(10);
    p {
      font-size: vw(13);
      line-height: 2;
    }
  }
  .diagnoseInfo {
    overflow: auto;
    margin-top: vw(10);
    width: 100%;
    .diagnoseCard {
      padding: vw(10) vw(20) vw(10) vw(20);
      display: flex;
      justify-content: space-between;
      .diagnoseText {
        display: flex;
        flex-direction: column;
        p {
          font-size: vw(14);
          margin-bottom: vw(10);
          i {
            margin-right: vw(20);
            color: #333;
          }
        }
        span {
          font-size: vw(12);
          color: #999;
          margin-bottom: vw(10);
        }
        b {
          font-size: vw(12);
          color: #ec5e28;
        }
      }
      button {
        margin-top: vw(10);
        width: vw(50);
        height: vw(25);
        font-size: vw(12);
        color: #fff;
        border-radius: vw(3);
        border: none;
        background: #2ec7c9;
      }
    }
  }
}
</style>